<template>
  <div class="tourist-layout">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <!-- 左侧标题 -->
          <router-link to="/tourist/home" class="logo">
            <el-icon><Place /></el-icon>
            <span>乡村旅游平台</span>
          </router-link>

          <!-- 中间导航菜单 -->
          <div class="nav-menu">
            <router-link to="/tourist/home" class="nav-item">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </router-link>
            <router-link to="/tourist/products" class="nav-item">
              <el-icon><Orange /></el-icon>
              <span>农产品</span>
            </router-link>
            <router-link to="/tourist/tourism" class="nav-item">
              <el-icon><Place /></el-icon>
              <span>乡村旅游</span>
            </router-link>
            <router-link to="/tourist/ai-chat" class="nav-item">
              <el-icon><Service /></el-icon>
              <span>智能体AI</span>
            </router-link>
            <router-link to="/tourist/cart" class="nav-item">
              <el-icon><ShoppingCartFull /></el-icon>
              <span>购物车</span>
            </router-link>
          </div>

          <!-- 右侧用户菜单 -->
          <div class="user-info">
            <el-dropdown @command="handleCommand">
              <span class="user-dropdown-link">
                <el-icon><User /></el-icon>
                <span>游客</span>
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item command="logout" divided>
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="el-main-content">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import {
  ArrowDown,
  ShoppingCartFull,
  Orange,
  Place,
  House,
  Service,
  User,
  SwitchButton,
} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();

const activeIndex = ref(route.path);

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    activeIndex.value = newPath;
  }
);

const menuItems = [
  { path: "/tourist/home", name: "首页" },
  { path: "/tourist/products", name: "特色农产品" },
  { path: "/tourist/tourism", name: "乡村旅游" },
  { path: "/tourist/knowledge", name: "农技知识" },
  { path: "/tourist/cart", name: "购物车" },
];

const userInfo = ref({
  userName: localStorage.getItem("userName") || "游客",
});

const cartCount = ref(0); // 这里可以通过 pinia store 获取实际的购物车数量

const handleCommand = (command: string) => {
  if (command === "profile") {
    router.push("/tourist/profile");
  } else if (command === "logout") {
    // 清除所有用户相关信息
    localStorage.removeItem("token");
    localStorage.removeItem("tokenExpireTime");
    localStorage.removeItem("userName");
    localStorage.removeItem("userType");
    // 提示退出成功
    ElMessage.success("退出登录成功");
    // 跳转到登录页
    router.push("/login");
  }
};

// 处理菜单选择
const handleSelect = (index: string) => {
  router.push(index);
};
</script>

<style lang="scss" scoped>
.tourist-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .header {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #eee;

    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #1a1a1a;
        font-size: 18px;
        font-weight: 600;
        gap: 8px;
        transition: all 0.3s ease;

        &:hover {
          color: #409eff;
        }

        .el-icon {
          font-size: 24px;
        }
      }

      .nav-menu {
        display: flex;
        align-items: center;
        gap: 32px;

        .nav-item {
          display: flex;
          align-items: center;
          gap: 6px;
          text-decoration: none;
          color: #606266;
          font-size: 15px;
          padding: 6px 12px;
          border-radius: 6px;
          transition: all 0.3s ease;

          .el-icon {
            font-size: 20px;
            transition: all 0.3s ease;
          }

          &:hover {
            color: #409eff;
            background-color: rgba(64, 158, 255, 0.1);
            .el-icon {
              transform: scale(1.1);
            }
          }

          &.router-link-active {
            color: #409eff;
            background-color: rgba(64, 158, 255, 0.1);
            font-weight: 500;
          }
        }
      }

      .user-info {
        .user-dropdown-link {
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          padding: 6px 12px;
          border-radius: 6px;
          transition: all 0.3s ease;
          color: #666;
          font-size: 14px;

          &:hover {
            background-color: rgba(0, 0, 0, 0.04);
            color: #409eff;
          }

          .el-icon {
            font-size: 16px;
          }
        }
      }
    }
  }

  .el-main {
    padding: 0;
    width: 100%;
    background-color: transparent;

    .el-main-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 24px;
      width: 100%;
      min-height: calc(
        100vh - 84px
      ); // 84px = header height (64px) + margin (20px)
      background-color: transparent;
    }
  }
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;

  .el-icon {
    font-size: 16px;
  }
}

/* 确保图标垂直居中 */
:deep(.el-icon) {
  display: flex;
  align-items: center;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0;
  height: 60px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  margin-right: auto;
}

.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #409eff;
}

.nav-item.router-link-active {
  color: #409eff;
}

.user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.el-header {
  border-bottom: 1px solid #eee;
  background: #fff;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

:deep(.el-menu) {
  border-bottom: none;

  .el-menu-item {
    font-size: 16px;

    .el-icon {
      margin-right: 4px;
      font-size: 18px;
    }
  }
}

/* 占位元素，用于平衡布局 */
.placeholder {
  width: 200px;
}

.user-dropdown-link {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
}

.user-dropdown-link:hover {
  color: #409eff;
}
</style> 